import './progress-bar.css'
var ProgressBar = {
    name: 'ProgressBar',
    template: '<div class="progress-bar" :style="{height: height, backgroundColor: backgroundColor}">' +
            '    <div class="progress" :style="{backgroundColor: color}" ref="progress"></div>' +
            '  </div>',
    props: {
        percentage: {
            type: Number,
            default: function () {
                return 0
            },
            validate: function (value) {
                if (value > 100 || value < 0) {
                    throw new Error('进度条只能显示0%到100%之间的进度')
                }
                return value <= 100&&value>=0
            }
        },
        height: {
            type: String,
            default: function () {
                return '5px'
            }
        },
        backgroundColor: {
            type: String,
            default: function () {
                return 'rgba(66,160,222,0.2)'
            }
        },
        color: {
            type: String,
            default: function () {
                return '#24dcf7'
            }
        }
    },
    watch:{
        percentage:function (newVal,oldVal){
            this.animateProgress(newVal)
        }
    },
    methods:{
        animateProgress(progress){
            var self = this
            if(progress){
                self.$refs.progress.style.width = progress + '%'
            }
        }
    },
    mounted: function () {
        var self = this
        self.animateProgress(self.percentage)
    },
}